<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Totomo">
  <meta name="Keywords" content="key">
  <meta name="Description" content="keyboard">
  <title>键盘操作</title>
  <style type="text/css">
	table{border:1px solid;border-radius:5px;width:400px;height:400px}
	td{border:1px solid;border-radius:1px;width:20px;height:20px}
  </style>
  <script type="text/javascript">
	var position=5;
	setTimeout(def,1000);
	function def(){
		document.getElementById(""+position+"").style.backgroundColor='white';
		position=position+10;
		document.getElementById(""+position+"").style.backgroundColor='orange';
		if(position<91){
		var timeID = self.setTimeout(def,1000);}
	}
	function hh(key){
		/*if (position>90)
		{
			if((key==1)&&(position>11)){//上
				document.getElementById(""+position+"").style.backgroundColor='white';
				position -=20;
				def();
			}else if((key==2)&&((position%10)!=1)){//左
				document.getElementById(""+position+"").style.backgroundColor='white';
				position -= 1;
				document.getElementById(""+position+"").style.backgroundColor='orange';
			}else if((key==4)&&((position%10)!=0)){//右
				document.getElementById(""+position+"").style.backgroundColor='white';
				position += 1;
				document.getElementById(""+position+"").style.backgroundColor='orange';
			}
		}else */
		if (position>90){
			document.getElementById(""+position+"").style.backgroundColor='orange';
		}else if((key==1)&&(position>11)){//上
			document.getElementById(""+position+"").style.backgroundColor='white';
			position -=10;
			document.getElementById(""+position+"").style.backgroundColor='orange';
		}else if((key==2)&&((position%10)!=1)){//左
			document.getElementById(""+position+"").style.backgroundColor='white';
			position -= 1;
			document.getElementById(""+position+"").style.backgroundColor='orange';
		}else if((key==3)&&(position<91)){//下
			document.getElementById(""+position+"").style.backgroundColor='white';
			position += 10;
			document.getElementById(""+position+"").style.backgroundColor='orange';
		}else if((key==4)&&((position%10)!=0)){//右
			document.getElementById(""+position+"").style.backgroundColor='white';
			position += 1;
			document.getElementById(""+position+"").style.backgroundColor='orange';
		}
	}
  </script>
 </head>
 <body>
	做一个单元格，仿颜色单元格下落，上下左右键控制，默认1秒速度往下落<br/>
	<table onkeyup="hh(event)" >
		<tr>
			<td id="1"/>
			<td id="2"/>
			<td id="3"/>
			<td id="4"/>
			<td id="5" style="background-color:orange;"/>
			<td id="6"/>
			<td id="7"/>
			<td id="8"/>
			<td id="9"/>
			<td id="10"/>
		</tr>
		<tr>
			<td id="11"/>
			<td id="12"/>
			<td id="13"/>
			<td id="14"/>
			<td id="15"/>
			<td id="16"/>
			<td id="17"/>
			<td id="18"/>
			<td id="19"/>
			<td id="20"/>
		</tr>
		<tr>
			<td id="21"/>
			<td id="22"/>
			<td id="23"/>
			<td id="24"/>
			<td id="25"/>
			<td id="26"/>
			<td id="27"/>
			<td id="28"/>
			<td id="29"/>
			<td id="30"/>
		</tr>
		<tr>
			<td id="31"/>
			<td id="32"/>
			<td id="33"/>
			<td id="34"/>
			<td id="35"/>
			<td id="36"/>
			<td id="37"/>
			<td id="38"/>
			<td id="39"/>
			<td id="40"/>
		</tr>
		<tr>
			<td id="41"/>
			<td id="42"/>
			<td id="43"/>
			<td id="44"/>
			<td id="45"/>
			<td id="46"/>
			<td id="47"/>
			<td id="48"/>
			<td id="49"/>
			<td id="50"/>
		</tr>
		<tr>
			<td id="51"/>
			<td id="52"/>
			<td id="53"/>
			<td id="54"/>
			<td id="55"/>
			<td id="56"/>
			<td id="57"/>
			<td id="58"/>
			<td id="59"/>
			<td id="60"/>
		</tr>
		<tr>
			<td id="61"/>
			<td id="62"/>
			<td id="63"/>
			<td id="64"/>
			<td id="65"/>
			<td id="66"/>
			<td id="67"/>
			<td id="68"/>
			<td id="69"/>
			<td id="70"/>
		</tr>
		<tr>
			<td id="71"/>
			<td id="72"/>
			<td id="73"/>
			<td id="74"/>
			<td id="75"/>
			<td id="76"/>
			<td id="77"/>
			<td id="78"/>
			<td id="79"/>
			<td id="80"/>
		</tr>
		<tr>
			<td id="81"/>
			<td id="82"/>
			<td id="83"/>
			<td id="84"/>
			<td id="85"/>
			<td id="86"/>
			<td id="87"/>
			<td id="88"/>
			<td id="89"/>
			<td id="90"/>
		</tr>
		<tr>
			<td id="91"/>
			<td id="92"/>
			<td id="93"/>
			<td id="94"/>
			<td id="95"/>
			<td id="96"/>
			<td id="97"/>
			<td id="98"/>
			<td id="99"/>
			<td id="100"/>
		</tr>
	</table>
	<p>&nbsp;&nbsp; <button onclick="hh(1)">↑</button></p>
	<button onclick="hh(2)">←</button>
	<button onclick="hh(3)">↓</button>
	<button onclick="hh(4)">→</button>
	<script type="text/javascript">
	</script>
 </body>
</html>
